import React from 'react';
import { useDispatch } from 'react-redux';
import { deleteTodo, toggleTodo } from '../redux/actions';

const TodoItem = ({ todo, dragStart, dragOver, drop, index }) => {
  const dispatch = useDispatch();
  
  const getPriorityColor = () => {
    switch(todo.priority) {
      case 3: return 'red';
      case 2: return 'orange';
      default: return 'green';
    }
  };

  return (
    <div
      role="listitem"
      draggable
      onDragStart={(e) => dragStart(e, index)}
      onDragOver={(e) => dragOver(e, index)}
      onDrop={(e) => drop(e, index)}
      style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '10px',
        margin: '5px 0',
        backgroundColor: todo.completed ? '#f0f0f0' : 'white',
        textDecoration: todo.completed ? 'line-through' : 'none',
        border: `1px solid ${getPriorityColor()}`,
        borderRadius: '4px',
        cursor: 'move'
      }}
    >
      <div>
        <span style={{ color: getPriorityColor(), marginRight: '10px' }}>
          {['Low', 'Medium', 'High'][todo.priority - 1]}
        </span>
        {todo.title}
      </div>
      <div>
        <button onClick={() => dispatch(toggleTodo(todo.id))}>
          {todo.completed ? 'Undo' : 'Complete'}
        </button>
        <button onClick={() => dispatch(deleteTodo(todo.id))}>Delete</button>
      </div>
    </div>
  );
};

export default TodoItem;